import React, { useState, useEffect } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import {
  DatePicker,
  TreeSelect,
  Checkbox,
  Select,
  Tree,
  Table,
  Form,
  Input,
  Upload,
} from 'antd';
import { history, request } from 'umi';
import axios from 'axios';
import './style.less';
function Index() {
  const [parentvalue, setparentvalue] = useState('');
  const [treeData, setTreeData] = useState();
  const { TextArea } = Input;
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState('');
  const [previewTitle, setPreviewTitle] = useState('');
  const [fileList, setFileList] = useState([]);
  const handleCancel = () => setPreviewOpen(false);
  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    setPreviewImage(file.url || file.preview);
    setPreviewOpen(true);
    setPreviewTitle(
      file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
    );
  };
  const handleChange = ({ fileList: newFileList }) => {
    console.log(newFileList, 111111);
    setFileList(newFileList);
  };
  const [userImgPath, setUserImgPath] = useState();
  const uploadButton = <div>上传</div>;
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '选择角色',
      dataIndex: 'age',
      key: 'age',
    },
  ];
  const data = [
    {
      id: '1',
      name: 'John Brown',
    },
    {
      id: '2',
      name: 'Jim Green',
    },
    {
      id: '3',
      name: 'Joe Black',
    },
  ];
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log('selectedRows: ', selectedRows);
    },
  };
  const a = (record) => {
    return record;
  };
  const getDepart = async () => {
    request('/api/departPost', {
      method: 'get',
    }).then((res) => {
      // 判断管理的弹出
      setTreeData(res.departlist);
    });
  };
  useEffect(() => {
    getDepart();
  }, []);
  const onSelect = (keys, info) => {
    // setparentvalue(info.departentName);
    // setdepart(info._id);
    // setsonvalue(sonvalue);
  };
  const onChange = (e) => {
    // setsonvalue(e.target.value);
  };
  const add = async () => {
    let Form1 = form.getFieldsValue();
    let Form2 = form2.getFieldsValue();
    // console.log(Form1)
    // console.log(Form2)
    let obj = {
      username: Form1.username,
      password: Form1.password,
      locking: Form1.locking,
      realName: Form1.username,
      introduce: Form1.username,
      imgpath: userImgPath,
      // createTime: Form1.createTime,
      login: Form1.login,
      superior: Form2.superior,
      remarks: Form1.remarks,
    };
    let { data } = await axios.post('http://127.0.0.1:7777/users/adduser', obj);
    // let { data } = await axios.post('http://127.0.0.1:7777/users/adduser', obj);
    if (data.code !== 201) {
      return false;
    }
    alert('添加成功');
  };

  const [form] = Form.useForm();
  const [form2] = Form.useForm();
  const success = (e) => {
    setUserImgPath(e);
  };
  return (
    <div className="adduser">
      <div className="adduserTop">
        <button>新增</button>
        <button onClick={add}>保存</button>
      </div>
      <div className="addusermain">
        <div className="aumleft">
          <Form
            form={form}
            name="basic"
            labelCol={{
              span: 6,
            }}
            wrapperCol={{
              span: 20,
            }}
            style={{
              maxWidth: 392,
            }}
            initialValues={{
              remember: true,
            }}
            autoComplete="off"
          >
            <Form.Item
              label="登录账号"
              name="username"
              rules={[
                {
                  required: true,
                  message: '账号不能为空!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="登录密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: '密码不能为空!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item label="是否锁定" name="locking">
              <Select
                style={{
                  width: 270,
                }}
                // onChange={handleChange}
                options={[
                  {
                    value: true,
                    label: '是',
                  },
                  {
                    value: false,
                    label: '否',
                  },
                ]}
              />
            </Form.Item>
            <Form.Item label="生效日期" name="createTime">
              <DatePicker style={{ width: 270 }} />
            </Form.Item>
            <Form.Item label="" name="login" valuePropName="checked">
              <Checkbox style={{ marginLeft: '90px' }}>限制重复登录</Checkbox>
            </Form.Item>
            <Form.Item label="签名图片" name="autographimg">
              <Upload
                action="http://127.0.0.1:7777/addimg"
                listType="picture-card"
                fileList={fileList}
                onPreview={handlePreview}
                onChange={handleChange}
                onSuccess={success}
              >
                {fileList.length >= 8 ? null : uploadButton}
              </Upload>
            </Form.Item>
            <Form.Item label="备注说明" name="remarks">
              <TextArea rows={4} />
            </Form.Item>
          </Form>
        </div>
        <div className="aumright">
          <Form
            form={form2}
            name="basic"
            labelCol={{
              span: 6,
            }}
            wrapperCol={{
              span: 20,
            }}
            style={{
              maxWidth: 392,
            }}
            initialValues={{
              remember: true,
            }}
            autoComplete="off"
          >
            <Form.Item label="人员档案ID" name="userid">
              <Input placeholder="不指定人员档案时，系统会自动创建档案" />
            </Form.Item>
            <Form.Item
              label="真实姓名"
              name="username"
              rules={[
                {
                  required: true,
                  message: '姓名不能为空!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item label="主部门" name="department">
              <TreeSelect
                showSearch
                style={{
                  width: 295,
                }}
                value={parentvalue}
                dropdownStyle={{
                  maxHeight: 400,
                  overflow: 'auto',
                }}
                placeholder=""
                allowClear
                treeDefaultExpandAll
                // onChange={onChange}
                onSelect={onSelect}
                fieldNames={{ label: 'departentName', value: 'key' }}
                treeData={treeData}
              />
            </Form.Item>
            <Form.Item
              label="主岗位"
              name="mainpost"
              rules={[
                {
                  required: true,
                  message: '岗位不能为空!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="直接上级"
              name="superior"
              rules={[
                {
                  required: true,
                  message: '直接上级不能为空!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="辅部门"
              name="audepart"
              rules={[
                {
                  required: true,
                  message: '辅部门不能为空!',
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="辅岗位"
              name="auxiliarypost"
              rules={[
                {
                  required: true,
                  message: '辅岗位不能为空!',
                },
              ]}
            >
              <Select
                defaultValue="否"
                style={{
                  width: 295,
                }}
                // onChange={handleChange}
                options={[
                  {
                    value: 'true',
                    label: '是',
                  },
                  {
                    value: 'false',
                    label: '否',
                  },
                ]}
              />
            </Form.Item>
          </Form>
          <Table
            rowKey={a}
            rowSelection={{ ...rowSelection }}
            bordered
            scroll={{
              y: 200,
            }}
            pagination={false}
            style={{ width: '360px', marginLeft: '50px' }}
            columns={columns}
            dataSource={data}
          />
        </div>
      </div>
    </div>
  );
}

export default Index;
